<script setup>
import { useRouter } from "vue-router"
const User = window.User

let router = useRouter()
</script>

<template>
  <!-- 用户栏 -->
  <div class="user model" id="user-model">
    <template v-if="User.name">
      <div class="userimg">
        <img v-if="User.data.userImg" :src="User.data.userImg" class="tx" />
        <img v-else src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" class="tx" />
      </div>
      <div class="hoverBottom username" @click="router.push('/user')" style="font-size: 25px">
        {{ User.name }}
      </div>
      <!-- <div class="userid">UID: {{ data.userId }}</div> -->
      <div class="hoverBottom release" @click="router.push('/release')">发个博客</div>
      <div class="hoverBottom release" @click="router.push('/note')">写条记录</div>
    </template>
    <template v-else>
      <div class="userimg">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" class="tx" />
      </div>
      <div>未登录</div>
      <div class="hover" @click.stop="router.push('/login')">请先登录</div>
    </template>
  </div>
</template>

<style scoped>
/* 用户 */
.user {
  text-align: center;
}

.user .userimg {
  height: 108px;
  width: 108px;
}

.user .userimg img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.user>div:not(:first-child) {
  margin-top: 10px;
}

.user .tx {
  width: 100%;
  border-radius: 50%;
}
</style>